import React, { Fragment, useEffect, useState } from 'react';
import { SuperTableProps } from '@/components/SuperTable/index';
import { Button, ButtonProps } from 'antd';
import { IdEntity, IdType } from '@/types/base-type';
import { ActionType } from '@ant-design/pro-table';
import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  ExportOutlined,
  ImportOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import { FormSchema } from '@ant-design/pro-form/es/components/SchemaForm/typing';
import { BetaSchemaForm } from '@ant-design/pro-form';
import { autoRc } from '@/utils/auto-render';
import { RecordExport } from '@/components/SuperTable/RecordExport';

declare type EventType = 'create' | 'delete' | 'update' | 'import' | 'export' | 'clone';

declare type TriggerSchemaType<RecordType> = ButtonProps & {
  schema?: Partial<FormSchema<RecordType>>;
}

declare type ToolBarProps<RecordType extends IdEntity<IdType>> = Pick<SuperTableProps<RecordType, any>, 'columns'> & {
  tableRef?: SuperTableProps<RecordType, any>['instance'];
  action: ActionType | undefined;
  rows: {
    selectedRowKeys?: IdType[];
    selectedRows?: RecordType[];
  };
  global?: ButtonProps;
} & {
  [key in EventType]?: TriggerSchemaType<RecordType>;
}

const ToolBar = <RecordType extends IdEntity<IdType>>(props: ToolBarProps<RecordType>) => {

  const { columns, tableRef, action, rows, global } = props;

  const _build = (type: EventType, p?: ButtonProps): ButtonProps => {
    const _default: ButtonProps = {
      type: 'primary',
      ... global,
      ... p,
    };

    if (type === 'create') {
      _default['icon'] = p?.icon || <PlusOutlined />;
      _default['children'] = p?.children || '新增';
    } else if (type === 'delete') {
      _default['icon'] = p?.icon || <DeleteOutlined />;
      _default['children'] = p?.children || '删除';
    } else if (type === 'update') {
      _default['icon'] = p?.icon || <EditOutlined />;
      _default['children'] = p?.children || '编辑';
    } else if (type === 'import') {
      _default['icon'] = p?.icon || <ImportOutlined />;
      _default['children'] = p?.children || '导入';
    } else if (type === 'export') {
      _default['icon'] = p?.icon || <ExportOutlined />;
      _default['children'] = p?.children || '导出';
    } else if (type === 'clone') {
      _default['icon'] = p?.icon || <CopyOutlined />;
      _default['children'] = p?.children || '克隆';
    }

    return {
      ... _default,
      children: _default?.shape === 'circle' && _default?.type !== 'link' ? null : _default?.children,
    };
  };

  const [ fields, setFields ] = useState<FormSchema<RecordType>['columns']>([]);

  useEffect(() => {
    const list: FormSchema<RecordType>['columns'] = [];
    columns?.forEach(i => list.push(
      {
        // 需要查看渲染BetaSchemaForm#columns属性相关文档
        ... i as any,
        width: '100%',
      },
    ));
    setFields(list);
  }, [ columns ]);

  const _deleteDefaultColumns: FormSchema<RecordType>['columns'] = [
    {
      title: <>确定要删除选中的 { autoRc.renderHighlightNumber(rows.selectedRowKeys?.length) } 条数据吗？</>,
      renderFormItem: () => <></>,
      formItemProps: { colon: false },
    },
  ];

  return <Fragment>
    <BetaSchemaForm
      title="新增"
      columns={ fields }
      labelCol={ { xs: { span: 24 }, sm: { span: 8 } } } labelWrap={ { xs: { span: 24 }, sm: { span: 16 } } }
      { ... props?.create?.schema as any }
      trigger={
        <Button { ... _build('create', props?.create) } />
      }
      grid colProps={ { span: 12, ... props?.create?.schema?.colProps } }
      layout={ props?.create?.schema?.layout || 'horizontal' }
      layoutType={ props?.create?.schema?.layoutType || 'ModalForm' }
    />
    <BetaSchemaForm
      title="删除" width={ 520 } // default modal width 520
      columns={ _deleteDefaultColumns }
      // labelCol={ { xs: { span: 24 }, sm: { span: 8 } } } labelWrap={ { xs: { span: 24 }, sm: { span: 16 } } }
      { ... props?.delete?.schema as any }
      trigger={
        <Button { ... _build('delete', props?.delete) } danger disabled={ rows?.selectedRowKeys?.length === 0 } />
      }
      // grid colProps={ { span: 12, ... props?.delete?.schema?.colProps } }
      layout={ 'inline' }
      layoutType={ 'ModalForm' }
    />
    <BetaSchemaForm
      title="修改"
      columns={ fields }
      labelCol={ { xs: { span: 24 }, sm: { span: 8 } } } labelWrap={ { xs: { span: 24 }, sm: { span: 16 } } }
      { ... props?.update?.schema as any }
      trigger={
        <Button { ... _build('update', props?.update) } disabled={ rows?.selectedRowKeys?.length !== 1 } />
      }
      grid colProps={ { span: 12, ... props?.update?.schema?.colProps } }
      layout={ props?.update?.schema?.layout || 'horizontal' }
      layoutType={ props?.update?.schema?.layoutType || 'ModalForm' }
    />
    <BetaSchemaForm
      title="导入"
      columns={ fields }
      labelCol={ { xs: { span: 24 }, sm: { span: 8 } } } labelWrap={ { xs: { span: 24 }, sm: { span: 16 } } }
      { ... props?.import?.schema as any }
      trigger={
        <Button { ... _build('import', props?.import) } />
      }
      // readonly={true}
      render={ () => <a>xx</a> }
      grid colProps={ { span: 12, ... props?.import?.schema?.colProps } }
      layout={ props?.import?.schema?.layout || 'horizontal' }
      layoutType={ props?.import?.schema?.layoutType || 'ModalForm' }
    />
    <RecordExport
      title="导出" width={ 520 } // default modal width 520
      columns={ fields }
      // labelCol={ { xs: { span: 24 }, sm: { span: 8 } } } labelWrap={ { xs: { span: 24 }, sm: { span: 16 } } }
      { ... props?.export?.schema as any }
      trigger={
        <Button { ... _build('export', props?.export) } />
      }
      // grid colProps={ { span: 12, ... props?.delete?.schema?.colProps } }
      layout={ 'horizontal' }
      layoutType={ 'ModalForm' }
    />
    <BetaSchemaForm
      title="克隆"
      columns={ fields }
      labelCol={ { xs: { span: 24 }, sm: { span: 8 } } } labelWrap={ { xs: { span: 24 }, sm: { span: 16 } } }
      { ... props?.clone?.schema as any }
      trigger={
        <Button { ... _build('clone', props?.clone) } disabled={ rows?.selectedRowKeys?.length !== 1 } />
      }
      grid colProps={ { span: 12, ... props?.clone?.schema?.colProps } }
      layout={ props?.clone?.schema?.layout || 'horizontal' }
      layoutType={ props?.clone?.schema?.layoutType || 'ModalForm' }
    />
  </Fragment>;
};

export {
  ToolBarProps, ToolBar, EventType,
};